<template>
  <xl-popup :popupShow="visible" :title="title" :height="80" @popupHidden="$emit('onClose')">
    <view class="_wrapper">
      <view class="top-wrapper">
        <view class="date-wrapper">
          <view 
            :class="date.date === item.value ? 'date-item checked' : 'date-item'" 
            v-for="item in dateList"
            @tap="selectedDate(item)" 
            :key="item.value">{{ item.label }}</view>
        </view>
        <view class="time-wrapper">
          <view @tap="selectedTime(item)" :class="getClass(item)" v-for="item in timeList" :key="item.value">{{ item.label }}</view>
        </view>
      </view>
      <view class="footer">
        <view class="sub-btn" @tap="onSubmit">确定</view>
      </view>
    </view>
  </xl-popup>
</template>
<script setup>
  import { reactive } from 'vue';
  import { getNearlySevenDays, showToast } from '@/common/util';
  import xlPopup from '@/components/xl-popup';
  import dayjs from "dayjs";

  defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '时间选择'
    }
  });

  const $emit = defineEmits(['onClose', 'onChange']);

  const date = reactive({
    date: '',
    time: ''
  });

  const getTitle = item => {
    if (!item) {
      return '';
    }
    const d = new Date(item);
    const month = d.getMonth() + 1;
    const date = d.getDate();
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const week = weekdays[d.getDay()]

    return `${month}月${date}日 [${week}]`;
  }

  const isDisabled = (time) => {
    if (!date.date || !time || !time.split('-')[1]) {
      return false;
    }
    const timeEnd = time.split('-')[1]
    const currTime = `${date.date} ${timeEnd}:00`;
    return dayjs(currTime).isBefore(new Date());
  }
  const getClass = (item) => {
    if (isDisabled(item.value)) {
      return 'time-item disabled';
    }
    return date.time === item.value ? 'time-item checked' : 'time-item';
  }

  const dateList = reactive(getNearlySevenDays().map(v => ({
    label: getTitle(v),
    value: v
  })));
  const timeList = reactive([
    {
      label: '10:00-12:00',
      value: '10:00-12:00',
    },
    {
      label: '12:00-14:00',
      value: '12:00-14:00',
    },
    {
      label: '14:00-16:00',
      value: '14:00-16:00',
    },
    {
      label: '16:00-18:00',
      value: '16:00-18:00',
    },
  ]);
  
  const selectedDate = val => {
    date.date = val.value;
    if (isDisabled(date.time)) {
      date.time = null;
    }
  }
  const selectedTime = val => {
    if (isDisabled(val.value)) {
      return ;
    }
    date.time = val.value
  }
  const onSubmit = () => {
    if (!date.date || !date.time) {
      showToast('请选择时间');
      return ;
    }
    $emit('onChange', date);
  }
</script>
<style lang="scss" scoped>
._wrapper {
  width: 100%;
  height: 100%;
  .top-wrapper {
    height: 650upx;
    display: flex;
    justify-content: space-between;
    .date-wrapper {
      width: 250upx;
      height: 100%;
      background-color: #f5f5f5;
      .date-item {
        height: 80upx;
        line-height: 80upx;
        text-align: center;
        font-size: 28upx;
        color: #1f1f1f;
        &.checked {
          background-color: #fff;
          font-weight: bold;
        }
      }
    }
    .time-wrapper {
      flex: 1;
      height: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      .time-item {
        box-sizing: border-box;
        border: 1px solid #dbdbdb;
        color: #000;
        font-size: 28upx;
        text-align: center;
        line-height: 80upx;
        border-radius: 10upx;
        margin-bottom: 10upx;
        &:last-child {
          margin-bottom: 0;
        }
        &.checked {
          border: 1px solid #461E50;
          color: #461E50;
          font-weight: bold;
        }
        &.disabled {
          background-color: #f5f5f5;
        }
      }
    }
  }
  .footer {
    height: 100upx;
    margin-top: 30upx;
    .sub-btn {
      width: 690upx;
      margin-left: auto;
      margin-right: auto;
      height: 80upx;
      background-color: #461E50;
      color: #fff;
      text-align: center;
      line-height: 80upx;
      font-size: 28upx;
      border-radius: 10upx;
    }
  }
}
</style>